<template>
    <div class="content">
        <div class="dialog-header">
            <van-tabs v-model:active="active">
                <van-tab title="网站使用规约">
                    <div
                        :style="{ height: isSafari ? 'calc(100vh - 220px)' : 'calc(100vh - 250px)', overflowY: 'auto' }">
                        <WebsiteUsageGuidelines />
                    </div>

                </van-tab>
                <van-tab title="隐私条款">
                    <div
                        :style="{ height: isSafari ? 'calc(100vh - 220px)' : 'calc(100vh - 250px)', overflowY: 'auto' }">
                        <PrivacyPolicy />
                    </div>
                </van-tab>
            </van-tabs>
        </div>

        <div class="footer" :style="{ height: isSafari ? '165px' : '200px' }">

            <van-checkbox-group v-model="checked">
                <van-checkbox class="wrap-checkbox">
                    我已阅读并同意
                    <span class="link-text" @click="informedConsent(0, $event)">《网站使用规约》</span>以及
                    <span class="link-text" @click="informedConsent(1, $event)">《隐私条款》</span>
                </van-checkbox>
            </van-checkbox-group>

            <div style="display: flex;margin-top: 10px;">
                <van-button type="default" block style="margin-right: 10px;" @click="cancel">取消</van-button>
                <van-button block type="primary" color="#bf1920" @click="sure">
                    确定
                </van-button>
            </div>

        </div>
    </div>
</template>

<script setup lang='ts'>
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from "@/stores/user";
import PrivacyPolicy from './PrivacyPolicy.vue'
import { isSafariBrowser, isEdgeBrowser } from '@/utils/browser'
import WebsiteUsageGuidelines from './WebsiteUsageGuidelines.vue'

const router = useRouter();

const route = useRoute();

const store = useUserStore();

const active = ref(0);

const checked = ref([]);

const isSafari = ref(false)

const isEdge = ref(false)

onMounted(() => {
    isSafari.value = isSafariBrowser()

    isEdge.value = isEdgeBrowser().isEdge && isEdgeBrowser().isAndroid
})

const informedConsent = (index: number, event: any) => {
    if (event) event.stopPropagation()

    active.value = index;
}

//取消
const cancel = () => {
    router.replace('/check')
}

// 确定
const sure = async () => {
    if (!checked.value.length) {
        showNotify({ type: 'danger', message: '请阅读并同意《网站使用规约》以及《隐私条款》' });
        return
    }

    await store.getReading(false, store.userName)

    route.query.type === '1' ? await store.getLogin({ username: store.userName, password: store.passWord }) : await store.getLoginverification({ username: store.userName, verify_code: store.captchaCode })

    const redirect = route.query.redirect as string

    router.push({
        path: redirect || '/menu/worksheets'
    })

    store.getPermission()
}
</script>

<style lang="scss" scoped>
.content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0 10px;

    .dialog-header {
        flex: 1;
        padding: 0 10px;

    }

    .footer {
        .wrap-checkbox {
            white-space: normal;
            word-wrap: break-word;
            align-items: flex-start;
        }

        .wrap-checkbox .van-checkbox__label {
            white-space: normal !important;
            word-wrap: break-word !important;
        }

        .link-text {
            cursor: pointer;
            color: #005efc;
            text-decoration: underline;
            display: inline;
            /* 保持链接在同一行除非需要换行 */
        }

        .agree {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            :deep(.van-radio__icon .van-icon) {
                border: 1px solid #005efc;
            }
        }


    }
}
</style>